<template>
    <div class="box" @click="toggleClick">
        <i :class="{ 'is-active': isActive }" class="el-icon-s-fold hamburger"></i>
    </div>
</template>

<script>
export default {
    name: "Hamburger",
    data() {
        return {};
    },
    props: {
        isActive: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        toggleClick() {
            this.$emit("toggleClick");
        },
    },
};
</script>

<style scoped>
.box {
    color: black;
    width: 60px;
    height: 60px;
    transition: 0.2s;
}
.hamburger {
    display: inline-block;
    vertical-align: middle;
    transform: scale(1.5);
}

.hamburger.is-active {
    transform: rotate(180deg) scale(1.5);
}
</style>
